<template>
  <view class="detail-container">
    <ve-card title="费用信息" type="none" fold v-model:initFold="initExpand">
      <template #operator-left>
        <view class="all-amount c1 fs32 fw600">{{ fee.totalAmount }}元</view>
      </template>
      <ve-cell-price label="实收金额" :value="fee.receivedAmount"></ve-cell-price>
      <ve-cell-price label="待收金额" :value="fee.receivedNotAmount"></ve-cell-price>
      <ve-cell-price label="实付金额" :value="fee.payAmount"></ve-cell-price>
      <ve-cell-price label="待付金额" :value="fee.payNotAmount"></ve-cell-price>
      <view class="form-block" v-if="totalDetailList.length">
        <template v-for="(item, index) in totalDetailList" :key="index">
          <ve-cell-price :label="item.name + '账单计划总额'" :value="item.amount"></ve-cell-price>
          <ve-cell-price :label="item.name + '账单计划待收金额'" :value="item.receivedNotAmount"></ve-cell-price>
        </template>
      </view>
      <ve-gap size="24"></ve-gap>
    </ve-card>
    <!-- 费用记录 -->
    <view class="fee-card" v-for="item in orderFeeList" :key="item.id">
      <view class="title">
        <view class="status">
          <view class="status-1" v-if="item.feeStatusName">{{ item.feeStatusName }}</view>
          <view class="status-2" v-if="item.feeTypeName">{{ item.feeTypeName }}</view>
          <view class="status-3" v-if="item.costTypeName">{{ item.costTypeName }}</view>
          <view class="status-4 text-o" v-if="item.payTypeName">{{ item.payTypeName }}</view>
        </view>
      </view>
      <block v-if="item.tableOpen == false">
        <!-- 费用表格 -->
        <FeeTable :key="forceUpdate" :data="item"></FeeTable>
        <ve-cell-val label="创建时间" :value="item.createTime" />
      </block>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { getOrdrFeeDetailAPI } from '@/api/order/lOrder'
  import { decimalSubtract } from '@/utils'
  import FeeTable from './fee-table.vue'
  import { onShow } from '@dcloudio/uni-app'

  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })
  const screenTypes = reactive({
    feeType: '',
    costType: '',
    feeStatus: '',
  }) //筛选参数
  const initExpand = ref(false)
  const fee = ref({})
  const totalDetailList = ref({})
  const orderFeeList = ref([])
  const forceUpdate = ref(0)
  const getDetail = async (id) => {
    const res = await getOrdrFeeDetailAPI({ id })
    const datafee = res.result
    fee.value = datafee

    var dataOne = []
    var dataTwo = []

    // 筛选dataOne和dataTwo
    if (fee.value.orderFeeList && fee.value.orderFeeList.length) {
      fee.value.orderFeeList.forEach((i) => {
        if (
          (screenTypes.feeType == '' || screenTypes.feeType == i.feeType) &&
          (screenTypes.costType == '' || screenTypes.costType == i.costType) &&
          (screenTypes.feeStatus == '' || screenTypes.feeStatus == i.feeStatus)
        ) {
          dataOne.push(i)
        }
      })
    }
    if (fee.value.violationFeeList && fee.value.violationFeeList.length) {
      fee.value.violationFeeList.forEach((i) => {
        // costType转换changeCostType 匹配订单费
        if (i.costType == 0) {
          i.changeCostType = 10
        }
        if (i.costType == 1) {
          i.changeCostType = 20
        }
        // feeStatus转换changeFeeStatus 匹配订单费
        if (i.feeStatus == 0) {
          i.changeFeeStatus = 3
        }
        if (i.feeStatus == 1) {
          i.changeFeeStatus = 4
        }
        if (i.feeStatus == 2) {
          i.changeFeeStatus = 2
        }
        if (i.feeStatus == 3) {
          i.changeFeeStatus = 1
        }
        if (i.feeStatus == 5) {
          i.changeFeeStatus = 5
        }
        if (i.feeStatus == 9) {
          i.changeFeeStatus = 9
        }
        // 违章费筛选匹配
        if (
          (screenTypes.feeType == '' || screenTypes.feeType == i.feeType) &&
          (screenTypes.costType == '' || screenTypes.costType == i.changeCostType) &&
          (screenTypes.feeStatus == '' || screenTypes.feeStatus == i.changeFeeStatus)
        ) {
          dataTwo.push(i)
        }
      })
    }

    const violationFeeList = (dataTwo || []).map((item) => {
      item.activeTotalAmount = item.totalAmount
      item.waitPayAmount = item.outstandingAmount //待结金额
      item.tableOpen = false //控制单个费用 整个表的显示隐藏
      item.open = false //控制1级
      item.costType = 0 // 费用
      if (item.feeDetailList) {
        item.feeDetailList.forEach((el) => {
          el.feeName = el.itemName
          el.activeAmount = el.amount
          if (!el.childrenList) {
            el.childrenList = []
          }
        })
      }
      return item
    })

    const orderFeeList1 = (dataOne || []).map((item) => {
      item.tableOpen = false //控制单个费用 整个表的显示隐藏
      item.open = false //控制1级
      item.waitPayAmount = decimalSubtract(item.totalAmount, item.payAmount)
      return item
    })

    orderFeeList.value = [...orderFeeList1, ...violationFeeList]
    totalDetailList.value = datafee.totalDetailList || []

    forceUpdate.value++
  }

  // 合并确认
  const mergeConfirm = () => {
    uni.navigateTo({
      url: '/pages/order/long-order/detail/mergeConfirmation?orderId=' + props.orderId,
    })
  }
  // 单个确认
  const feeConfirm = (record) => {
    if (record.feeCategory && record.feeCategory == 4) {
      uni.navigateTo({
        url: `/pages/asset/asset-fee/confirm-fee?id=${record.id}&feeCategory=4&violationDepositType=${record.violationDepositType}`,
      })
    } else {
      uni.navigateTo({
        url: '/pages/order/long-order/detail/confirmExpenses?idList=' + JSON.stringify([record.id]) + '&pagefrom=expense',
      })
    }
  }

  // 修改费用
  const feeEdit = (feeItem) => {
    // 存在分期方式，并且分期方式为 分期
    if (feeItem.feeCategory && feeItem.feeCategory == 4) {
      uni.navigateTo({
        url: `/pages/asset/asset-fee/edit-fee?id=${feeItem.id}&feeCategory=4&addorEdit=1&businesId=${feeItem.id}`,
      })
    } else if (feeItem.paymentWay && feeItem.paymentWay != 1) {
      uni.navigateTo({
        url: '/pages/order/long-order/edit-stages-fees?id=' + feeItem.id,
      })
    } else {
      uni.navigateTo({
        url: '/pages/order/long-order/edit-fees?id=' + feeItem.id,
      })
    }
  }
  // 筛选
  const getScreenDetail = (chooseTypes) => {
    // console.log('带入的筛选参数:', chooseTypes)
    screenTypes.feeType = chooseTypes.feeType
    screenTypes.costType = chooseTypes.costType
    screenTypes.feeStatus = chooseTypes.feeStatus
    getDetail(props.orderId)
  }
  onShow(() => {
    if (props.orderId) {
      getDetail(props.orderId)
    }
  })
</script>

<style lang="scss" scoped>
  .detail-container {
    padding: 40rpx 24rpx 24rpx;
  }
  .upinfo {
    padding: 24rpx;
  }
  .all-amount {
    margin-right: 20rpx;
    text-align: right;
  }
  .fee-card {
    background: #ffffff;
    border-radius: 8rpx;
    padding: 0 24rpx 24rpx;
    margin-bottom: 24rpx;
    .title {
      padding: 20rpx 0;
      border-bottom: 1px solid rgba(216, 216, 216, 0.3);
      .status {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .status-1 {
          background: #ffece8;
          color: #f53f3f;
          border: 2rpx solid #f53f3f;
          border-radius: 450rpx;
          padding: 0 16rpx;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 24rpx;
          margin-right: 10rpx;
        }
        .status-2 {
          background: #e8f7ff;
          color: #3491fa;
          border: 2rpx solid #3491fa;
          border-radius: 450rpx;
          padding: 0 16rpx;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 24rpx;
          margin-right: 10rpx;
        }
        .status-3 {
          background: #fff7e8;
          color: #ff7d00;
          border: 2rpx solid #ff7d00;
          border-radius: 450rpx;
          padding: 0 16rpx;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 24rpx;
          margin-right: 10rpx;
        }
        .status-4 {
          background: #f5e8ff;
          color: #722ed1;
          border: 2rpx solid #722ed1;
          border-radius: 450rpx;
          padding: 0 16rpx;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 24rpx;
          margin-right: 10rpx;
          // 文字超长
          display: inline-block;
          max-width: 280rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .open-close {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text {
          color: rgba(48, 114, 246, 1);
          margin-right: 4rpx;
          font-size: 28rpx;
        }
      }
    }

    .table-buttons {
      border-top: 1px solid rgba(216, 216, 216, 0.3);
      margin-top: 24rpx;
      // padding-top: 24rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .time {
        color: #191c27;
        font-size: 28rpx;
      }
      .ve-button {
        margin-top: 24rpx;
      }
    }
  }
</style>
